import { useState } from "react";
import Modal from "./Modal";
function PortalsTest() {
  const [isShow, setIsShow] = useState(false);
  return (
    <div>
      <h1>App组件</h1>
      <p>最后需要注意一下的就是使用 *Portal* 所渲染的元素在触发事件时的冒泡问题。

以上面的例子为例，看上去模态框已经渲染到了 *modal* 这个元素里面，但是在 *React* 中事件冒泡是按照组件结构来进行冒泡的，我们可以看到即使模态框已经渲染到了 *modal* 里面，但是在组件树中模态框组件仍然是在根组件中。</p>
      <button onClick={() => setIsShow(!isShow)}>显示/隐藏</button>
      {isShow ? <Modal /> : null}
    </div>
  );
}

export default PortalsTest;
